<!DOCTYPE html>
<html lang="zh-cn" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>{{'weatherDemo'|translate}}</title>
    <link href="lib/bootstrap-3.3.7/bootstrap.min.css" rel="stylesheet">
    <link href="./theme/css/service.css" rel="stylesheet">
</head>
<body ng-controller="LineCtrl">
<div>
    <div class="topic">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h1>{{'cityWeather'|translate}}</h1>
                </div>
                <div class="col-md-offset-4 col-md-2">
                    <div class="btn-group top-button-div">
                        <label class="btn btn-default" ng-model="toggleLangModel.lang" uib-btn-radio="'English'"
                               ng-click="toggleLangModel.click('en_us')">English</label>
                        <label class="btn btn-default" ng-model="toggleLangModel.lang" uib-btn-radio="'中文'"
                               ng-click="toggleLangModel.click('zh_cn')">中文</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="btn-group top-button-div">
                        <label class="btn btn-default" ng-model="temperatureTypeModel.dataText" uib-btn-radio="'°C'"
                               ng-click="temperatureTypeModel.changeClickFn('C')">°C</label>
                        <label class="btn btn-default" ng-model="temperatureTypeModel.dataText" uib-btn-radio="'°F'"
                               ng-click="temperatureTypeModel.changeClickFn('F')">°F</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row input-div">
            <div uib-alert ng-repeat="alert in restAlertModel.list" class="alert-danger"
                 close="restAlertModel.closeAlert($index)" ng-bind="alert.msg"
                 dismiss-on-timeout="5000"></div>
            <div class="input-group col-md-6 col-md-offset-3">
                <input type="text" class="form-control" placeholder="{{'yourCity'|translate}}" ng-model="searchModel.cityNameInput"
                       ng-keypress="($event.which === 13) ? searchModel.searchClickFn() : 0">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" ng-click="searchModel.searchClickFn()">{{'search'|translate}}</button>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="row text-center sub-text-div">
                <h3>{{'weatherDetails'|translate}}</h3>
            </div>
            <div class="row">
                <div class="col-md-3">
				    <div ng-show="uviDataModel.isBeta" class="beta-line">
                        <table class="table table-striped table-bordered">
                            <caption>
                               <h4> {{'currentUV'|translate}} <span class="uvi-new-span">NEW</span></h4>
                            </caption>
                            <thead>
                            <tr>
                                <th>{{'releaseTime'|translate}}</th>
                                <th>{{'index'|translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td ng-bind="uviDataModel.date"></td>
                                <td ng-bind="uviDataModel.value"></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="font-smaller uvi-div">
                            <div ng-bind="globalData.text5" class="bg-success wm-font-bolder"></div>
                            <div ng-bind="globalData.text6" class="bg-success"></div>
                            <div ng-bind="globalData.text7" class="bg-success"></div>
                            <div ng-bind="globalData.text8" class="bg-success"></div>
                            <div ng-bind="globalData.text9" class="bg-success"></div>
                            <div ng-bind="globalData.text10" class="bg-success"></div>
                        </div>

                    </div>
				
                    <h4 ng-bind="globalData.text1" class="{{uviDataModel.isBeta?'text1':''}}"></h4>
                    <div>
                        <span><img ng-src="./theme/image/{{weatherTableModel.image}}.png"></span>
                        <span class="weather-temp-txt weather-text-shadow" ng-bind="weatherTableModel.temp"></span>
                    </div>
                    <p ng-bind="weatherTableModel.weather"></p>
                    <table class="table table-striped table-bordered">
                        <caption ng-bind="weatherTableModel.time"></caption>
                        <tbody>
                        <tr ng-repeat="item in weatherTableModel.data">
                            <td ng-bind="item.name"></td>
                            <td ng-bind="item.value"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-9">
                    <uib-tabset active="0">
                        <uib-tab index="0" heading="Main">
                            <div class="sub-tab-div">
                                <h4 ng-bind="globalData.text2"></h4>
                            </div>
                            <div class="sub-tab-div">
                                <canvas id="forecastMainLineId" class="chart chart-line"
                                        chart-data="forecastMainChartModel.data"
                                        chart-labels="forecastMainChartModel.labels"
                                        chart-series="forecastMainChartModel.series"
                                        chart-dataset-override="forecastMainChartModel.datasetOverride"
                                        chart-colors="forecastMainChartModel.colors"
                                        chart-click="forecastMainChartModel.onClick">
                                </canvas>
                            </div>
                            <div class="for-list-group-div">
                                <ul class="list-group list-inline row">
                                    <li class="list-group-item col-md-1"
                                        ng-repeat="lItem in forecastMainListGroupModel.data">
                                        <img class="text-center" ng-src="./theme/image/{{lItem.image}}.png">
                                        <div class="text-center" ng-bind="lItem.temp"></div>
                                        <div class="text-center" ng-bind="lItem.wind"></div>
                                        <div class="text-center" ng-bind="lItem.pressure"></div>
                                    </li>
                                </ul>
                            </div>
                        </uib-tab>
                        <uib-tab index="1" heading="Hourly">
                            <div class="sub-tab-div">
                                <h4 ng-bind="globalData.text3"></h4>
                            </div>
                            <div class="sub-tab-div">
                                <table class="table table-striped table-bordered">
                                    <!--<caption>Hourly weather and forecasts in Shanghai, CN</caption>-->
                                    <tbody>
                                    <tr ng-repeat="item in forecastHourlyTableModel.data">
                                        <td>
                                            <span ng-bind="item.time"></span>
                                            <span><img ng-src="./theme/image/{{item.image}}.png" width="50px"
                                                       height="50px"></span>
                                        </td>
                                        <td class="middle">
                                            <div>
                                                <span class="weather-text-shadow" ng-bind="item.temp"></span>
                                                <span ng-bind="item.weather"></span>
                                            </div>
                                            <div>
                                                <span ng-bind="item.summary"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </uib-tab>
                        <uib-tab index="2" heading="Chart">
                            <div class="row sub-tab-div">
                                <div class="col-md-8">
                                    <h4 ng-bind="globalData.text4"></h4>
                                </div>
                                <div class="col-md-offset-1 col-md-3">
                                    <select class="form-control chart-select-div"
                                            ng-model="forecastChartMultiModel.type"
                                            ng-change="forecastChartMultiModel.onChange(forecastChartMultiModel.type)">
                                        <option>Temperature</option>
                                        <option>Wind</option>
                                        <option>Pressure</option>
                                        <option>Precipitation</option>
                                    </select>
                                </div>
                            </div>
                            <div class="sub-tab-div">
                                <canvas id="forecastChartMultiId" class="chart chart-bar"
                                        chart-data="forecastChartMultiModel.data"
                                        chart-labels="forecastChartMultiModel.labels"
                                        chart-series="forecastChartMultiModel.series"
                                        chart-dataset-override="forecastChartMultiModel.datasetOverride"
                                        chart-colors="forecastChartMultiModel.colors">
                                </canvas>
                            </div>
                        </uib-tab>
                    </uib-tabset>

                </div>
            </div>
        </div>
    </div>

    <div id="footer" class="container">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="navbar-inner navbar-content-center">
                <p class="muted credit foot-txt-div">
                    {{'baseOn'|translate}}
                    <a href="http://www.huaweicloud.com/product/cse.html" target='_blank'>{{'cse'|translate}}</a>
                    {{'dataSource'|translate}}
                    <a href="https://openweathermap.org/" target='_blank'>OpenWeatherMap</a>
                </p>
            </div>
        </nav>
    </div>
</div>

</body>
    <script src="./lib/angular-1.6.6/angular.min.js"></script>
    <script src="./lib/angular-translate/angular-translate.min.js"></script>
    <script src="./lib/angular-translate/angular-translate-loader-static-files.min.js"></script>
    <script src="./lib/Chart.js-2.7.1/Chart.min.js"></script>
    <script src="./lib/angular-chart.js-1.1.1/angular-chart.min.js"></script> 
    <script src="./lib/ui-bootstrap-2.5.0/ui-bootstrap-tpls-2.5.0.min.js"></script>
    <script src="./i18n/en_us.js"></script>
    <script src="./i18n/zh_cn.js"></script>
    <script src="js/weather-2.0.js"></script>
</html>
